<template>
	<view class="Withdrawal">
		<u-tabs :list="list1" itemStyle="padding-left: 32rpx; padding-right: 32rpx; height: 80rpx;background: #fff;"
			:activeStyle="{color: '#000000',fontWeight: 'bold'}" :lineColor="'#FC6758'" @click="click">
		</u-tabs>
		<view class="content_box">
			<view class="top">
				<view v-if="act2==1" class="top_box">
					<view class="small">
						牛果
					</view>
					<view class="num">
						{{about.integral}}
					</view>
				</view>
				<view v-else class="top_box">
					<view class="small">
						牛角
					</view>
					<view class="num">
						{{about.shareBonus}}
					</view>
				</view>
			</view>
			<view class="title">
				兑换数量
			</view>

			<view class="ex_box">
				<view class="input_box">
					<text>￥</text>
					<u--input color="#EC5050" fontSize="50rpx" type="number" clearable border="none"
						:placeholder="act2==1?'请输入牛果数量':'请输入牛角数量'" v-model="value"></u--input>
				</view>
				<view v-if="act2==1" class="fee">
					兑换比例：兑换牛角{{about.integralExchangeBonus}}:1
					兑换代金券{{about.integralExchangeBonus}}:1
					<!-- ，兑换秒杀券{{about.integralExchangeCoupon}}:1 -->
				</view>
				<view v-else class="fee">
					兑换比例：兑换余额{{about.bonusExchangeBalance}}:1
				</view>

				<view v-if="act2==1" class="act_box">
					<!-- <view @click="tabs(0)" class="acts">
						<image v-if="act==0" src="../../static/tabsIcon/co1.png" mode=""></image>
						<image v-else src="../../static/tabsIcon/co2.png" mode=""></image>
						<text>秒杀券</text>
					</view> -->
					<view @click="tabs(1)" class="acts">
						<image v-if="act==1" src="../../static/tabsIcon/co1.png" mode=""></image>
						<image v-else src="../../static/tabsIcon/co2.png" mode=""></image>
						<text>牛角</text>
					</view>
					<view @click="tabs(2)" class="acts">
						<image v-if="act==2" src="../../static/tabsIcon/co1.png" mode=""></image>
						<image v-else src="../../static/tabsIcon/co2.png" mode=""></image>
						<text>代金券</text>
					</view>
				</view>
				<view v-else class="act_box">
					<view class="acts">
						<image src="../../static/tabsIcon/co1.png" mode=""></image>
						<!-- <image src="../../static/tabsIcon/co2.png" mode=""></image> -->
						<text>余额</text>
					</view>
				</view>
			</view>

			<view class="button_box">
				<view @click="toexchange" class="button act">
					立即兑换
				</view>
			</view>
		</view>




	</view>
</template>

<script>
	import {
		exchangeinfo,
		exbonus,
		excoupon,
		exbalance,
		getinfo
	} from '@/api/mine'
	export default {
		data() {
			return {
				value: "",
				act: 1,
				act2: 1,
				id: "",
				fee: "",
				about: [],
				type: 1,
				hornExchange: 0,
				list1: [{
						name: '牛果兑换',
						value: 1
					},
					{
						name: '牛角兑换',
						value: 2
					}
				]
			}
		},
		onShow() {
			this.getinfo();
			this.exchangeinfo();
		},
		methods: {
			toexchange() {
				if (!this.value) {
					uni.showToast({
						icon: 'none',
						title: '请输入兑换数量'
					})
					return
				}
				if (this.act2 == 2) {
					this.exbalance(this.value);
				} else if (this.act2 == 1 && this.act == 0) {
					this.excoupon(this.value);
				} else if (this.act2 == 1 && this.act == 1) {
					this.exbonus(this.value)
				} else if (this.act2 == 1 && this.act == 2) {
					this.excoupon(this.value)
				}
			},
			exbonus(num) {
				let data = {
					integralNum: num
				}
				exbonus(data).then(res => {
					if (res.success == 1) {
						uni.showToast({
							icon: 'none',
							title: '兑换成功！'
						})
						this.value = "";
						this.exchangeinfo();
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			exbalance(num) {
				if (this.hornExchange == 0) {
					uni.showToast({
						icon: 'none',
						title: '暂未开放！'
					})
					return
				}
				let data = {
					bonusNum: num
				}
				exbalance(data).then(res => {
					if (res.success == 1) {
						uni.showToast({
							icon: 'none',
							title: '兑换成功！'
						})
						this.value = "";
						this.exchangeinfo();
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			excoupon(num) {
				let data = {
					integralNum: num,
					type: this.type
				}
				excoupon(data).then(res => {
					if (res.success == 1) {
						uni.showToast({
							icon: 'none',
							title: '兑换成功！'
						})
						this.value = "";
						this.exchangeinfo();
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			click(item) {
				this.act2 = item.value
			},
			tabs(i) {
				this.act = i
			},
			getinfo() {
				getinfo().then(res => {
						if (res.success == 1) {
							this.hornExchange = res.data.hornExchange;
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							})
						}
					})
					.catch(err => {

					});
			},
			exchangeinfo() {
				exchangeinfo().then(res => {
					if (res.success == 1) {
						this.about = res.data;
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: "./exchangeList"
			})
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f4f4f4;
	}

	.Withdrawal {
		// padding: 40rpx;
	}

	.content_box {
		padding: 30rpx;
	}

	.top {
		background-image: url(../../static/tabsIcon/otherbg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 300rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		text-align: center;

		.small {
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}

		.num {
			font-size: 60rpx;
		}
	}

	.title {
		color: #333333;
		margin: 80rpx 0 30rpx;
		font-size: 30rpx;
	}

	.ex_box {
		.input_box {
			display: flex;
			align-items: flex-end;
			padding: 20rpx 0;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.2);

			.in {
				color: #EC5050;
				font-size: 60rpx;
			}

			text {
				color: #333333;
				font-size: 30rpx;
				margin-right: 20rpx;
			}
		}

		.fee {
			color: #999999;
			font-size: 26rpx;
			margin: 20rpx 0 40rpx;
		}

		.act_box {
			display: flex;
			align-items: center;

			.acts {
				margin-right: 140rpx;
				color: #666666;
				font-size: 30rpx;
				display: flex;
				align-items: center;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	.button_box {
		// text-align: center;
		margin-top: 120rpx;
		padding-bottom: 80rpx;

		.button {
			width: 100%;
			height: 80rpx;
			display: inline-block;
			line-height: 80rpx;
			text-align: center;
			background: #FC6758;
			border-radius: 20px;
			color: #fff;
			font-size: 30rpx;
			// padding: 10rpx 80rpx;
		}
	}
</style>
